<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-21 10:51:29
 * @LastEditTime: 2020-07-22 16:48:35
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\scheduleSetting\scheduleDetails.vue
 * @Description: 查看排课详情
-->
<template>
    <div class="scheduleDetails">
        <div class="scheduleDetails_one">
            <h2 class="scheduleDetails_titles">{{$t('scheduleSetting.title.scheduleTitle2')}}</h2>
            <wordTable class="scheduleDetails_one_table" :label="label" :data="data"></wordTable>
            <el-button type="primary" class="scheduleDetails_one_btn" @click="back">{{$t('message.return')}}</el-button>
            <div class="schedule_panel" v-if="panelFlag">
                <arrange-panel ref="arrange-panel" :detailsFlag="false" :class-id="active.ids" :ids="active.id" :edit-type="active.type" :objs="active" :period-error="2" teacher-swap @back="back" :calendar-id="queryParams.condition.calendar"></arrange-panel>
            </div>
        </div>
    </div>
</template>

<script>
import wordTable from '../common/wordTable';
import ArrangePanel from "./ArrangePanel";
import { getValue } from "common/src/api/commonParam";
import { getDetail } from 'common/src/api/practiceManagement/scheduleSetting';
import commonMixins from '../commonMixins';
export default {
    // 组件名称
    name: 'scheduleDetails',
    // 局部注册的组件
    components: {
        wordTable,
        ArrangePanel
    },
    mixins: [commonMixins],
    // 组件参数 接收来自父组件的数据
    props: {
        scheduleFlag: { // false校内实践, true校外实践
            type: Boolean,
            default: false
        },
        ids: {
            type: String,
            default: ''
        },
        objs: {
            type: Object,
            default() {
                return { yearTerm: '', id: '', classId: '', isSchedule: '' };
            }
        }
    },
    // 组件状态值
    data() {
        return {
            panelFlag: false,
            queryParams: {
                condition: {
                    calendar: ''
                }
            },
            active: {
                id: null,
                type: 'detail',
                ids: '',
                dataId: '',
                yearTerm: ''
            },
            queryParams: {
                condition: {
                    calendar: ''
                }
            },
            data: {}, // 数据
            label: [
                [{ label: this.$t('fundingManagement.label.courseProgramNumber'), props: 'subCourseNo' }, { label: this.$t('scheduleSetting.label.courseName'), props: 'courseName' }],
                [{ label: this.$t('practiceTask.label.number'), props: 'studentCount' }, { label: this.$t('practiceReworkManagement.label.courseDateStart'), props: 'courseDateStart' }],
                [{ label: this.$t('practiceReworkManagement.label.courseDateEnd'), props: 'courseDateEnd' }, { label: this.$t('scheduleSetting.label.weekendFlag'), props: 'weekendFlags' }],
                [{ label: this.$t('scheduleSetting.label.mainTeacher'), props: 'mainTeacherNames' }, { label: this.$t('scheduleSetting.label.instructorTeacher'), props: 'instructorTeacherNames' }],
                [{ label: this.$t('scheduleSetting.label.estimatedFund'), props: 'funds' }, { label: this.$t('fundingManagement.label.practiceCategorys'), props: 'practiceCategorys' }],
                [{ label: this.$t('scheduleSetting.label.nature'), props: 'practiceNatures' }, { label: this.$t('practiceManagement.label.practiceArea'), props: 'baseAreas' }],
                [{ label: this.$t('label.campus'), props: 'compuss' }, { label: this.$t('fundingManagement.label.practiceDays'), props: 'practiceDays' }],
                [{ label: this.$t('scheduleSetting.label.practiceRemark'), props: 'practiceRemark' }],
                [{ label: this.$t('scheduleSetting.label.chooseCourseRemark'), props: 'chooseCourseRemark' }]
            ],
            options: {
                practiceNature: [  // 实践性质
                   { label: this.$t('fundingManagement.label.concentrated'), value: 'CENTRALIZE'},
                   { label: this.$t('fundingManagement.label.dispersion'), value: 'DISPERSE'}
                ],
                practiceCategory: [],
                weekendFlag: [
                    { label: this.$t('scheduleSetting.status.incloud'), value: 'Y' },
                    { label: this.$t('scheduleSetting.status.unIncloud'), value: 'N' }
                ],
                baseArea: [],
                compus: [] // 校区
            }
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {

    },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
        let p1 = getValue('arrange_default_term');
        p1.then(res => {
            this.queryParams.condition.calendar = res.data;
        });
        let params = {
            UDG_TRAINNING_POSITION: 'baseArea',
            UDG_PRACTICE_CATEGORY: 'practiceCategory',
            X_XQ: 'compus'
        }
        this.initOptions(params).then(() => {
            this.getDetails();
        });
    },
    // 组件方法
    methods: {
        getDetails() { // 获取详情
            getDetail({ id: this.ids }).then(res => {
                this.data = res.data;
                this.$set(this.data, 'practiceNatures', this.fieldChange(this.options.practiceNature, this.data.practiceNature));
                this.$set(this.data, 'practiceCategorys', this.fieldChange(this.options.practiceCategory, this.data.practiceCategory));
                this.$set(this.data, 'weekendFlags', this.fieldChange(this.options.weekendFlag, this.data.weekendFlag));
                this.$set(this.data, 'baseAreas', this.fieldChange(this.options.baseArea, this.data.baseArea));
                this.$set(this.data, 'compuss', this.fieldChange(this.options.compus, this.data.compus));
                if (this.data.mainTeacherName && this.data.mainTeacherJobno) {
                    this.$set(this.data, 'mainTeacherNames', `${this.data.mainTeacherName}(${this.data.mainTeacherJobno})`);
                }
                if (this.data.instructorTeacherName && this.data.instructorTeacherJobno) {
                    let names = res.data.instructorTeacherName.split(",")
                    let codes = res.data.instructorTeacherJobno.split(",")
                    let instructorTeacherNames = null;
                    for(let i=0;i<names.length;i++){
                        instructorTeacherNames = instructorTeacherNames?instructorTeacherNames+","+names[i]+ '('+codes[i]+')':names[i]+ '('+codes[i]+')'
                    }
                    this.$set(this.data, 'instructorTeacherNames', instructorTeacherNames);
                }
                this.panelFlag = false;
                if (parseInt(this.data.baseArea) !== 410001) {
                    //this.panelFlag = false;
                    this.label[6] = [{ label: this.$t('fundingManagement.label.courseAddr'), props: 'courseAddr' }, { label: this.$t('fundingManagement.label.practiceDays'), props: 'practiceDays' }]
                }
                this.active.id = res.data.teachingClassId;
                this.active.dataId = this.objs.id;
                this.active.ids = res.data.teachingClassId;
            });
        },
        back() {
            this.$emit('back', 'refresh');
        }
    }
};
</script>
<style lang="scss" scoped>
.scheduleDetails {
    &_one {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        &_table {
            padding: 20px;
        }
        &_btn {
            margin-right: 20px;
            align-self: flex-end;
        }
    }
    &_titles {
        padding: 0 40px 20px;
        border-bottom: solid #ccc 1px;
    }
    &_panel {
        padding: 20px;
        background-color: #fff;
        &_line {
            height: 20px;
            width: 100%;
            border-top: solid 1px #ccc;
        }
    }
}
</style>
